Conversation
🦋 Changeset detectedLatest commit: b2fd360 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
bsatarnejad
left a comment
bsatarnejad
left a comment
There was a problem hiding this comment.
It looks good visually. this moves the visible validation message outside the TextField, but the input’s aria-describedby still points to the hidden inner validation element, whose message is empty. The newly rendered visible error has no id, so screen readers won’t get the actual error text from the invalid input.
There was a problem hiding this comment.
Pull request overview
Fixes a layout issue in Primer::OpenProject::InputGroup where showing a validation error message could break alignment of the trailing action (e.g., clipboard copy button) by moving the visible validation message outside the flex row (similar to the caption).
Changes:
- Extract
validation_messagefrom thetext_inputslot args and render it beneath the flex row. - Add a new preview + Playwright snapshot for the error state.
- Add a component test to ensure the validation message is rendered outside the flex container.
Reviewed changes
Copilot reviewed 6 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| app/components/primer/open_project/input_group.rb | Extracts validation message from the text field args to enable rendering it outside the flex row. |
| app/components/primer/open_project/input_group.html.erb | Renders the extracted validation message below the flex row to avoid trailing-action misalignment. |
| test/components/primer/open_project/input_group_test.rb | Adds a regression test for validation-message placement (outside flex row). |
| previews/primer/open_project/input_group_preview.rb | Adds a Lookbook preview + snapshot for the “with error message” state. |
| .playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/input_group/with_error_message/aria-snapshot.yml | Records the accessible tree snapshot for the new preview. |
| .changeset/many-sheep-yell.md | Adds a patch changeset for the InputGroup error-message alignment fix. |
10ce575 to
5877f1b
Compare
What are you trying to accomplish?
Fix alignment of InputGroups with error messages
List the issues that this change affects.
https://community.openproject.org/wp/DREAM-695
Risk Assessment
What approach did you choose and why?
Move the validation messahe out of the actual input similar to how it was done for the caption